import React from 'react';

import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';

import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';

import axios from 'axios';
import copy from 'copy-to-clipboard';


import {render as renderAmis, ToastComponent, AlertComponent, replaceText} from 'amis';
import {alert, confirm, toast} from 'amis-ui';
import { Action } from 'amis/lib/renderers/Action';
import { replace } from 'react-router-dom';

// amis 环境配置
const env = {
  // 下面三个接口必须实现
  fetcher: ({
    url, // 接口地址
    method, // 请求方法 get、post、put、delete
    data, // 请求数据
    responseType,
    config, // 其他配置
    headers // 请求头
  }: any) => {
    config = config || {};
    config.withCredentials = true;
    responseType && (config.responseType = responseType);

    if (config.cancelExecutor) {
      config.cancelToken = new (axios as any).CancelToken(
        config.cancelExecutor
      );
    }

    config.headers = headers || {};

    if (method !== 'post' && method !== 'put' && method !== 'patch') {
      if (data) {
        config.params = data;
      }
      return (axios as any)[method](url, config);
    } else if (data && data instanceof FormData) {
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (
      data &&
      typeof data !== 'string' &&
      !(data instanceof Blob) &&
      !(data instanceof ArrayBuffer)
    ) {
      data = JSON.stringify(data);
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'application/json';
    }

    return (axios as any)[method](url, data, config);
  },
  isCancel: (value: any) => (axios as any).isCancel(value),
  copy: (content: string) => {
    copy(content);
    toast.success('内容已复制到粘贴板');
  },

  // 后面这些接口可以不用实现

  // 默认是地址跳转
  jumpTo: (
    location: string /*目标地址*/,
    action: any /* action对象*/
  ) => {
    // 用来实现页面跳转, actionType:link、url 都会进来。
  },

  updateLocation: (
    location: string /*目标地址*/,
    replace: boolean /*是replace，还是push？*/
  ) => {
    // 地址替换，跟 jumpTo 类似
  },

  isCurrentUrl: (
    url: string /*url地址*/,
  ) => {
    // 用来判断是否目标地址当前地址
  },

  notify: (
    type: 'error' | 'success' /**/,
    msg: string /*提示内容*/
  ) => {
    toast[type]
      ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
      : console.warn('[Notify]', type, msg);
  },
  alert,
  confirm,
};


class AMISComponent extends React.Component<any, any> {
  render() {
    return renderAmis(
      // 这里是 amis 的 Json 配置。
      {
        "type": "page",
        "title": "Simple Form Page",
        "regions": [
          "body"
        ],
        "body": [
          {
            "type": "container",
            "body": [
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:b76cb4ea45b2",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "refresh"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/c1KVGjw0/R.png"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid",
                  "marginBottom": "20px"
                },
                "id": "u:3fe40ddbc6be",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "url": "/home",
                          "blank": false
                        }
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/bJPsfbFj/780.jpg"
              },
              {
                "type": "avatar",
                "showtype": "image",
                "icon": "",
                "fit": "cover",
                "style": {
                  "width": 50,
                  "height": 50,
                  "borderRadius": 50,
                  "fontFamily": "",
                  "fontSize": 12,
                  "backgroundColor": "",
                  "backgroundSize": "",
                  "backgroundPosition": "",
                  "backgroundImage": "",
                  "borderLeftStyle": "solid",
                  "borderTopStyle": "solid",
                  "borderRightStyle": "solid",
                  "borderBottomStyle": "solid"
                },
                "id": "u:3aa82b01de1f",
                "gap": 4,
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "goBack"
                      }
                    ]
                  }
                },
                "src": "https://i.postimg.cc/W4kF1Czg/power-svgrepo-com.png"
              }
            ],
            "style": {
              "position": "fixed",
              "display": "flex",
              "flexWrap": "nowrap",
              "flexDirection": "column",
              "alignItems": "center",
              "overflowX": "visible",
              "width": "80px",
              "justifyContent": "center",
              "zIndex": 1,
              "inset": "auto 10px 10px auto"
            },
            "size": "none",
            "wrapperBody": false,
            "id": "u:74e24a3d423e",
            "isFixedHeight": false,
            "isFixedWidth": true,
            "stickyPosition": "auto",
            "originPosition": "right-bottom",
            "onEvent": {
              "click": {
                "weight": 0,
                "actions": []
              }
            }
          },
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [
                  {
                    "type": "image",
                    "id": "u:8e90168b0e76",
                    "enlargeAble": false,
                    "maxScale": 200,
                    "minScale": 50,
                    "style": {
                      "display": "inline-block"
                    },
                    "themeCss": {
                      "imageContentClassName": {
                        "size:default": {
                          "width": "var(--sizes-base-50)",
                          "height": "var(--sizes-base-50)",
                          "minWidth": ""
                        }
                      },
                      "imageControlClassName": {
                        "border:default": {
                          "top-border-width": "var(--borders-width-1)",
                          "left-border-width": "var(--borders-width-1)",
                          "right-border-width": "var(--borders-width-1)",
                          "bottom-border-width": "var(--borders-width-1)"
                        },
                        "radius:default": {
                          "top-left-border-radius": "var(--borders-radius-1)",
                          "top-right-border-radius": "var(--borders-radius-1)",
                          "bottom-left-border-radius": "var(--borders-radius-1)",
                          "bottom-right-border-radius": "var(--borders-radius-1)"
                        }
                      }
                    },
                    "editorSetting": {
                      "mock": {
                        "src": "https://i.postimg.cc/1XpbRmh2/ethernet.png"
                      }
                    },
                    "src": "https://i.postimg.cc/1XpbRmh2/ethernet.png",
                    "imageMode": "thumb",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          
                        ]
                      }
                    }
                  },
                  {
                    "type": "tpl",
                    "tpl": "串口测试",
                    "inline": true,
                    "wrapperComponent": "h3",
                    "id": "u:4867bf01e2f2"
                  },
                  {
                    "type": "tpl",
                    "tpl": "扫描枪、读卡器、电源板",
                    "inline": true,
                    "wrapperComponent": "",
                    "id": "u:cd7efde57d03",
                    "themeCss": {
                      "baseControlClassName": {
                        "font:default": {
                          "text-align": "center",
                          "color": "#848484"
                        },
                        "background:default": "transparent"
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "flexDirection": "column",
                  "alignItems": "center",
                  "overflowY": "visible"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:6ae4cbdeb9c0",
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "blank": false,
                          "url": "/serial"
                        }
                      }
                    ]
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:956ad54c1cb8",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/Hs9Ffkt7/printer.png"
                          }
                        },
                        "src": "https://i.postimg.cc/Hs9Ffkt7/printer.png"
                      },
                      {
                        "type": "tpl",
                        "tpl": "打印机测试",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:d7689a144103"
                      },
                      {
                        "type": "tpl",
                        "tpl": "思普瑞特、美松",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:6eb6569fce38",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:25f912ea95ad",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/printer"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:92a79e6c5e57"
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:ba38edb9e911",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "src": "https://i.postimg.cc/hPc5bqq4/rfid.png",
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/hPc5bqq4/rfid.png"
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "读卡器测试",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:5fce644e36c4"
                      },
                      {
                        "type": "tpl",
                        "tpl": "明泰三合一",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:593e9d0820e2",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:faef0af9cc3d",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/card"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:53db8a8dce80"
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:01ddbb94d9ca",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "src": "https://i.postimg.cc/X7LDsDVf/keyboard.png",
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/X7LDsDVf/keyboard.png"
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "输入事件测试",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:322ea8a5572e"
                      },
                      {
                        "type": "tpl",
                        "tpl": "USB扫描枪、磁条刷卡器",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:35da03ef8643",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:944520b0ef4a",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/input"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:46b9fdc592f5"
              }
            ],
            "style": {
              "position": "relative",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "overflowY": "visible",
              "rowGap": "50px"
            },
            "id": "u:0a2eca054b48",
            "isFixedHeight": false,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "1.25rem",
                  "marginBottom": "var(--sizes-base-40)"
                }
              }
            },
            "visible": true
          },
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [
                  {
                    "type": "image",
                    "id": "u:2ab1ff082ea0",
                    "enlargeAble": false,
                    "maxScale": 200,
                    "minScale": 50,
                    "style": {
                      "display": "inline-block"
                    },
                    "themeCss": {
                      "imageContentClassName": {
                        "size:default": {
                          "width": "var(--sizes-base-50)",
                          "height": "var(--sizes-base-50)",
                          "minWidth": ""
                        }
                      },
                      "imageControlClassName": {
                        "border:default": {
                          "top-border-width": "var(--borders-width-1)",
                          "left-border-width": "var(--borders-width-1)",
                          "right-border-width": "var(--borders-width-1)",
                          "bottom-border-width": "var(--borders-width-1)"
                        },
                        "radius:default": {
                          "top-left-border-radius": "var(--borders-radius-1)",
                          "top-right-border-radius": "var(--borders-radius-1)",
                          "bottom-left-border-radius": "var(--borders-radius-1)",
                          "bottom-right-border-radius": "var(--borders-radius-1)"
                        }
                      }
                    },
                    "src": "https://i.postimg.cc/8CJKPpL4/camera.png",
                    "editorSetting": {
                      "mock": {
                        "src": "https://i.postimg.cc/8CJKPpL4/camera.png"
                      }
                    }
                  },
                  {
                    "type": "tpl",
                    "tpl": "摄像头测试",
                    "inline": true,
                    "wrapperComponent": "h3",
                    "id": "u:248abf13498e"
                  },
                  {
                    "type": "tpl",
                    "tpl": "测试摄像头是否可用",
                    "inline": true,
                    "wrapperComponent": "",
                    "id": "u:08f0fbc7fd9a",
                    "themeCss": {
                      "baseControlClassName": {
                        "font:default": {
                          "text-align": "center",
                          "color": "#848484"
                        },
                        "background:default": "transparent"
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:b0d010f9ad4e",
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "blank": false,
                          "url": "/camera"
                        }
                      }
                    ]
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:81836ce6ceb3",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "src": "https://i.postimg.cc/QM26F2b3/api.png",
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/QM26F2b3/api.png"
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "API测试",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:e46dfd28caa8"
                      },
                      {
                        "type": "tpl",
                        "tpl": "测试API是否可用",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:323e1a768678",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:dfdde6ede4c5",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/api"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:6513c7ea343e"
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:2ad1c3450d77",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "src": "https://i.postimg.cc/BbsMg2k7/debugging.png",
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/BbsMg2k7/debugging.png"
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "Debug测试",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:82ed89aff999"
                      },
                      {
                        "type": "tpl",
                        "tpl": "测试验证程序功能",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:e3a2171bcdb5",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:345a1b08ce95",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/debug"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:6bd1a62cd18d"
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "image",
                        "id": "u:2fb7a85d92d1",
                        "enlargeAble": false,
                        "maxScale": 200,
                        "minScale": 50,
                        "style": {
                          "display": "inline-block"
                        },
                        "themeCss": {
                          "imageContentClassName": {
                            "size:default": {
                              "width": "var(--sizes-base-50)",
                              "height": "var(--sizes-base-50)",
                              "minWidth": ""
                            }
                          },
                          "imageControlClassName": {
                            "border:default": {
                              "top-border-width": "var(--borders-width-1)",
                              "left-border-width": "var(--borders-width-1)",
                              "right-border-width": "var(--borders-width-1)",
                              "bottom-border-width": "var(--borders-width-1)"
                            },
                            "radius:default": {
                              "top-left-border-radius": "var(--borders-radius-1)",
                              "top-right-border-radius": "var(--borders-radius-1)",
                              "bottom-left-border-radius": "var(--borders-radius-1)",
                              "bottom-right-border-radius": "var(--borders-radius-1)"
                            }
                          }
                        },
                        "src": "https://i.postimg.cc/15mvVcpf/user-guide.png",
                        "editorSetting": {
                          "mock": {
                            "src": "https://i.postimg.cc/15mvVcpf/user-guide.png"
                          }
                        }
                      },
                      {
                        "type": "tpl",
                        "tpl": "说明文档",
                        "inline": true,
                        "wrapperComponent": "h3",
                        "id": "u:6b2d7e36c300"
                      },
                      {
                        "type": "tpl",
                        "tpl": "使用前务必花两分钟阅读",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:43f3bcc17e93",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "text-align": "center",
                              "color": "#848484"
                            },
                            "background:default": "transparent"
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:1249b9e2ffdb",
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "blank": false,
                              "url": "/guide"
                            }
                          }
                        ]
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:ed6097a3ee8a"
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto"
            },
            "id": "u:2db748ea23b0",
            "isFixedHeight": false,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "1.25rem",
                  "marginBottom": "var(--sizes-base-40)"
                }
              }
            }
          },
          {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [
                  {
                    "type": "image",
                    "id": "u:d777f8c1765e",
                    "enlargeAble": false,
                    "maxScale": 200,
                    "minScale": 50,
                    "style": {
                      "display": "inline-block"
                    },
                    "themeCss": {
                      "imageContentClassName": {
                        "size:default": {
                          "width": "var(--sizes-base-50)",
                          "height": "var(--sizes-base-50)",
                          "minWidth": ""
                        }
                      },
                      "imageControlClassName": {
                        "border:default": {
                          "top-border-width": "var(--borders-width-1)",
                          "left-border-width": "var(--borders-width-1)",
                          "right-border-width": "var(--borders-width-1)",
                          "bottom-border-width": "var(--borders-width-1)"
                        },
                        "radius:default": {
                          "top-left-border-radius": "var(--borders-radius-1)",
                          "top-right-border-radius": "var(--borders-radius-1)",
                          "bottom-left-border-radius": "var(--borders-radius-1)",
                          "bottom-right-border-radius": "var(--borders-radius-1)"
                        }
                      }
                    },
                    "src": "https://i.postimg.cc/15mvVcpf/user-guide.png",
                    "editorSetting": {
                      "mock": {
                        "src": "https://i.postimg.cc/15mvVcpf/user-guide.png"
                      }
                    }
                  },
                  {
                    "type": "tpl",
                    "tpl": "ADB文档",
                    "inline": true,
                    "wrapperComponent": "h3",
                    "id": "u:f20c566fa253"
                  },
                  {
                    "type": "tpl",
                    "tpl": "adb操作不熟悉可查看该文档",
                    "inline": true,
                    "wrapperComponent": "",
                    "id": "u:3c7d349d4425",
                    "themeCss": {
                      "baseControlClassName": {
                        "font:default": {
                          "text-align": "center",
                          "color": "#848484"
                        },
                        "background:default": "transparent"
                      }
                    }
                  }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:29b63fae29cc",
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "ignoreError": false,
                        "actionType": "url",
                        "args": {
                          "blank": false,
                          "url": "/md"
                        }
                      }
                    ]
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:0181f16e13ae"
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:07e29b933bef"
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:42a58cbadbac"
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto"
            },
            "id": "u:f5991b7bfd51",
            "isFixedHeight": false,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "1.25rem",
                  "marginBottom": "var(--sizes-base-40)"
                }
              }
            }
          }
        ],
        "id": "u:0d44342b2ea7",
        "pullRefresh": {
          "disabled": true
        },
        "themeCss": {
          "bodyControlClassName": {
            "padding-and-margin:default": {
              "marginTop": "0.625rem",
              "marginRight": "0.625rem",
              "marginBottom": "0.625rem",
              "marginLeft": "0.625rem"
            }
          }
        },
        "definitions": {}
      },
      env
    );
  }
}

class APP extends React.Component<any, any> {
  render() {
    return (
      <>
        <ToastComponent key="toast" position={'top-center'} />
        <AlertComponent key="alert" />
        <AMISComponent />
      </>
    );
  }
}

export default APP;
